<template>
  <h1>{{ name }}</h1>
  <button @click="sayHello">方法</button>
  <h2>{{ sex }}</h2>
  <button @click="f2">方法2</button>
</template>

<script>
export default {
  name: "App",
  //key-value
  data(){
    return{
      sex:'男'
    }
  },
  methods:{
    f2(){
      alert('gg')
    }
  },
  setup() {
    //const定义的数据不可以发生改变
    let name = "张三";

    //方法 ``的作用
    function sayHello() {
      alert(`我叫${name}`);
    }

    /* 如果没有返回，上面是读不出来的 */
    return {
      name,
      sayHello,
    };

    //返回一个函数（渲染函数）
    //return ()=>h('h1','尚硅谷') 跟vue2的rander是一样的 就会解析模板h1 在vue2是解析模板app 要引入h
  },
};
</script>

<style>
</style>
